<route lang="json5" type="payRecord">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '支付记录',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false,
    onReachBottomDistance:50,
  },
}
</route>

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import { ref } from 'vue'
import orderDetail from '@/components/order-detail.vue'

const query_sb_chked_rs = ref([])
const query_md_chked_rs = ref([])
const sbList = ref(['17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007', '17800001', '17800002', '17800003', '17800004', '17800005', '17800006', '17800007',
])

const storeList = ref(['上海和平路1', '上海和平路2', '上海和平路3', '上海和平路4', '上海和平路5', '上海和平路6', '上海和平路7'])

function handleChange({ value }) {
  console.log(value)
}
const dropMenu = ref()
const slider = ref() // slider 1.2.25支持
function confirm() {
  dropMenu.value.close()
}

function handleOpened() {
  slider.value?.initSlider()
}
const loadState = ref<LoadMoreState>('loading')
const total = ref(50) // 总条数
const dataList = ref([]) // 列表数据
function loadMore() {
  if (loadState.value === 'finished') {
    console.log('加载完成')
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      console.log('没有更多数据了')
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  loadMore()
})
onReachBottom(() => {
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
const orderDetailRef = ref()
</script>

<template>
  <view class="topper-box">
    <view class="tag-list">
      <view class="flex">
        <wd-button :round="false" size="small" custom-class="btn-tag">
          上月
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag">
          昨天
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag">
          今天
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag">
          本月
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag">
          今年
        </wd-button>
        <wd-button :round="false" size="small" custom-class="btn-tag">
          自定义＞
        </wd-button>
      </view>
      <view class="timmer">
        查询时间 :2025/08/22 17:11 ~ 2025/08/22 17:11
      </view>
    </view>
    <view class="center-box wot-box">
      <wd-drop-menu class="drop-menu">
        <wd-drop-menu-item ref="dropMenu" title="按: 设备编号" @opened="handleOpened">
          <view class="drop-content">
            <view class="drop-label">
              设备编号（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_sb_chked_rs" inline>
                <wd-checkbox v-for="(item, index) in sbList" :key="item" :model-value="item">
                  <span class="sb-num">{{ item }}</span>
                  <span v-if="index === 1" class="modify-num">{{ index === 1 ? item : '' }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
          </view>
        </wd-drop-menu-item>
        <wd-drop-menu-item ref="dropMenu" title="按: 门店 / 标签" @opened="handleOpened">
          <view class="drop-content">
            <view class="drop-label">
              门店（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_md_chked_rs" inline>
                <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                  <span class="checkbox-label">{{ item }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
            <view class="drop-label">
              标签（筛选）：
            </view>
            <view class="sb-type">
              <wd-checkbox-group v-model="query_md_chked_rs" inline>
                <wd-checkbox v-for="item in storeList" :key="item" :model-value="item">
                  <span class="checkbox-label">{{ item }}</span>
                </wd-checkbox>
              </wd-checkbox-group>
            </view>
            <view class="mt-20rpx text-24rpx text-#FAAB0C">
              <span class="text-bold"> 说明：</span><br>
              选择则：按指条件查询，不选择则：查询所有<br>
              如未添加标签、门店，则直接查询
            </view>
          </view>
        </wd-drop-menu-item>
      </wd-drop-menu>
      <view class="btn-box">
        <wd-button type="primary" size="small" block custom-class="primary-button">
          筛选查询
        </wd-button>
      </view>
      <view class="flex py-30rpx">
        <view class="row flex-1 text-center">
          通道收款
          <view class="text-60rpx">
            0.00<text class="text-24rpx">
              元
            </text>
          </view>
          <view class="text-#969799">
            结算金额
          </view>
        </view>
        <view class="row flex-1 text-center">
          测试收款
          <view class="text-60rpx">
            0.00<text class="text-24rpx">
              元
            </text>
          </view>
          <view class="text-#969799">
            可充值服务费
          </view>
        </view>
      </view>
      <view class="statistics">
        <view class="s-col">
          <view class="s-item">
            <view class="s-label">
              支付笔数：
            </view>
            <view class="flex">
              <view class="num">
                0
              </view>笔
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              退款笔数：
            </view>
            <view class="flex">
              <view class="num">
                0
              </view>笔
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              失败笔数：
            </view>
            <view class="flex">
              <view class="num">
                0
              </view>笔
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              通道手续费：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              支付服务费：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              派币服务费：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
        </view>
        <view class="s-col">
          <view class="s-item">
            <view class="s-label">
              国通支付：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              乐刷支付：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              转服务费：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              国通退款：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
          <view class="s-item">
            <view class="s-label">
              乐刷退款：
            </view>
            <view class="flex">
              <view class="num">
                0.00
              </view>元
            </view>
          </view>
        </view>
      </view>
      <view class="tips">
        备注：服务费可到：
        <navigator url="" class="i-link">
          支付日志、
        </navigator>
        <navigator url="" class="i-link">
          购币日志、
        </navigator>
        <navigator url="" class="i-link">
          派币日志
        </navigator>
        里查看详情
      </view>
    </view>
  </view>
  <view class="wot-list pb-safe">
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="5">
          <view class="wot-item">
            设备编号
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            金额 / 上币
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item">
            通道 / 时间
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            支付 / 推送
          </view>
        </wd-col>
      </wd-row>
    </view>
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="5">
          <view class="wot-item">
            <wd-tag bg-color="#7232dd">
              1790005{{ index }}
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            <wd-tag bg-color="#07c160" class="mr-10rpx">
              1.00
            </wd-tag>
            <wd-tag type="primary">
              1
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item blue">
            乐刷WX
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            <wd-tag bg-color="#07c160">
              成功
            </wd-tag> / <wd-tag bg-color="#07c160">
              成功
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            <wd-tag plain color="#969799" bg-color="#969799">
              名字很重要
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            <wd-tag plain color="#969799" bg-color="#969799">
              套餐支付
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="8">
          <view class="wot-item blue">
            2025/08/28 10:48:32
          </view>
        </wd-col>
        <wd-col :span="6">
          <view class="wot-item">
            <wd-tag type="primary" custom-class="tag" @click="orderDetailRef.show = true">
              详情
            </wd-tag>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
    <orderDetail ref="orderDetailRef" />
  </view>
</template>

<style scoped lang="scss">
.tag-list {
  padding: 20rpx;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;

  .timmer {
    color: #646566;
    padding: 10rpx 0;
  }
}

.btn-tag {
  margin: 0 10rpx;
  background-color: $uni-color-primary !important;
}

.center-box {
  padding: 0 20rpx;
  background-color: #ffffff;
  padding-bottom: 20rpx;
  color: $uni-text-primary;
  .drop-content{
    padding: 20rpx 40rpx 40rpx;
    .sb-type{
      border-bottom: 1rpx solid #e2e2e2;
      padding-bottom: 20rpx;
    }
    .drop-label{
      padding: 20rpx 0;
      font-size: 28rpx;
      font-weight: bold;
      color: $uni-text-title;
    }
    .checkbox-label{
      color: $uni-text-primary;
      font-size: 24rpx;
    }
    .base-num {
      padding: 0 6rpx;
      border-radius: 4rpx;
      font-size: 24rpx;
    }
    .sb-num{
      @extend .base-num;
      background-color: #7232dd;
      color: #fff;

    }
    .modify-num {
      @extend .base-num;
      color:#c8c9cc;
      margin-left: 10rpx;
      border: 1rpx solid #c8c9cc;
    }
  }
  .btn-box {
    padding: 0 50rpx;
  }
}

.statistics {
  display: flex;
  justify-content: space-around;

  .s-col {
    width: 40%;

    .s-item {
      display: flex;
      padding-bottom: 5px;

      .s-label {
        width: 170rpx;
        text-align: right;
      }

      .num {
        background-color: $uni-color-orange;
        color: #fff;
        border-radius: 4rpx;
        padding: 0 4rpx;
        margin-right: 6rpx;
      }
    }

  }
}
.tips {
  font-size: 24rpx;
  color: #646566;
  padding: 7px 14px;
  .i-link {
    display: inline;
  }
}
.wot-item {
  text-align: left;
  padding-left: 12rpx;
  font-size: 24rpx;
}
.blue {
    color: #2A90FF;
  }
  .wot-title {
    position: sticky !important;
    top: 0;
  }
</style>
